<template>
  <view class="container">
    <button @click="chooseImage">选择本地图片</button>
    <image v-if="imageUrl" :src="imageUrl" mode="widthFix" style="width: 100%; margin-top: 20rpx;" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
const imageUrl = ref('');


const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      imageUrl.value = tempFilePath;

      uni.previewImage({
        urls: [tempFilePath],
        current: 0
      });
    }
  });
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
button {
  padding: 15rpx 30rpx;
  background: #007aff;
  color: #fff;
  border-radius: 8rpx;
}
</style>